import DashboardLayout from '@/components/layout/DashboardLayout'
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Activity, CreditCard, Users } from "lucide-react"

const stats = [
  {
    title: "总流量",
    value: "234.5GB",
    description: "本月已用流量",
    icon: <Activity className="h-4 w-4 text-muted-foreground" />
  },
  {
    title: "在线设备",
    value: "3",
    description: "最大允许 5 台设备",
    icon: <Users className="h-4 w-4 text-muted-foreground" />
  },
  {
    title: "订阅状态",
    value: "已激活",
    description: "到期时间: 2024-04-15",
    icon: <CreditCard className="h-4 w-4 text-muted-foreground" />
  }
]

export default function Dashboard() {
  return (
    <DashboardLayout>
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <h2 className="text-2xl font-bold tracking-tight">仪表盘</h2>
        </div>

        <div className="grid gap-4 md:grid-cols-3">
          {stats.map((stat, index) => (
            <Card key={index}>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">
                  {stat.title}
                </CardTitle>
                {stat.icon}
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{stat.value}</div>
                <p className="text-xs text-muted-foreground">
                  {stat.description}
                </p>
              </CardContent>
            </Card>
          ))}
        </div>

        <div className="grid gap-4 md:grid-cols-2">
          <Card>
            <CardHeader>
              <CardTitle>流量使用趋势</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="h-[200px] flex items-center justify-center text-muted-foreground">
                流量趋势图表
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>节点延迟</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="h-[200px] flex items-center justify-center text-muted-foreground">
                节点延迟图表
              </div>
            </CardContent>
          </Card>
        </div>

        <Card>
          <CardHeader>
            <CardTitle>最近连接记录</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-8">
              {[1, 2, 3].map((_, i) => (
                <div key={i} className="flex items-center">
                  <div className="space-y-1">
                    <p className="text-sm font-medium leading-none">
                      香港节点 01
                    </p>
                    <p className="text-sm text-muted-foreground">
                      最近连接时间: 2024-03-15 14:30
                    </p>
                  </div>
                  <div className="ml-auto font-medium">12.5GB</div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>
    </DashboardLayout>
  )
}